<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="初始化式的样式.css">
    <link rel="stylesheet" href="xmi.css">
    <link rel="stylesheet" href= "C:\Users\86150\Desktop\2x\源码\css\iconfont.css">
    <title>Document</title>
</head>
<body>
    <!-- 顶部广告  start-->
     <div class="header">
        <a href="#">
     <img src="C:\Users\86150\Desktop\2x\源码\images\01cc6a570d32a2ee09a2d5c2009a9968.jpg" alt="">
        </a>
    </div>
    <!-- 顶部广告  end-->

    <!-- 黑色导航 start -->
    <div class="black-nav">
        <div class="wrap"> 
            <ul class="black-nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>

       ····             <!-- 黑色导航鼠标效果 start-->
                <li><a href="#">下载app</a><span>|</span>
                    <div class="download"> 
                        <img src="C:\Users\86150\Desktop\2x\源码\images\78c30d4f259ed43ab20e810a522a6249.png" alt="">
                        <p>小米商城</p>
                
                      </div>
                      <div class="stri"></div>
                </li>
                <!-- 黑色导航鼠标效果 end-->

                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="black-nav-right">
              <li><a href="#">登入<span>|</span></li>
                <li><a href="#">注册<span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>

                        <!-- 黑色导航鼠标效果 start-->
                        <li class="cart "><a href="#">
                            <i class="iconfont ">&#xe735;</i> 
                            <i>购物车(0)</i></a>
                            <div class="cart-list">
                                购物车还没有商品，快点来选购吧~
                            </div>
                        </li>
                     <!-- 黑色导航鼠标效果 end-->

            </ul>
        </div>
    </div>
     
    <!-- 黑色导航 end -->


    <!-- 白色导航 start -->
     <div class="white-nav">
        <div class="wrap ">
<div class="logo">
    <img src="C:\Users\86150\Desktop\2x\源码\images\logo-mi2.png" alt="" class ="logo-mi01">

 <img src="C:\Users\86150\Desktop\2x\源码\images\5e9f2b1b0da09ac3b3961378284ef2d4.png" alt="" class="logo-mi">   
</div>

 <div class="nav-bar ">
<ul>
    <li><a href=""><img src="C:\Users\86150\Desktop\2x\源码\images\4352916da00136bf37bd81c25a146d13.png" alt=""></a></li>

    <!-- 白色导航滑动条 start -->
    <li>
        <a href="">小米手机</a>
        <div class="nav-bar-list">
            <div class="wrap"><ul>
                <li>
                    <a href="#">
                            <div class="img-box">
                                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                            </div>
                                <p class="name"> 小米只准10纪念版</p>
                                <p class="price"> 52000元</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                            <div class="img-box">
                                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                            </div>
                                <p class="name"> 小米只准10纪念版</p>
                                <p class="price"> 52000元</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                            <div class="img-box">
                                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                            </div>
                                <p class="name"> 小米只准10纪念版</p>
                                <p class="price"> 52000元</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                            <div class="img-box">
                                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                            </div>
                                <p class="name"> 小米只准10纪念版</p>
                                <p class="price"> 52000元</p>
                    </a>
                </li>
            </ul></div>
        </div>
      <!-- 白色导航滑动条 end-->

    </li>
    <li><a href="">电视</a></li>
    <li><a href="">笔记本 </a></li>
    <li><a href="">家电</a></li>
    <li><a href="">路由器</a></li>
    <li><a href="">智能硬件</a></li>
    <li><a href="">服务</a></li>
    <li><a href="">社区</a></li>
    
</ul>
 </div>

 <div class="search">

 <input type="text" placeholder="元宇宙">

 <button class="iconfont">&#xe63d;
 </button>


 </div>
        </div>

     </div>
   <!-- 白色导航 end -->

    <!-- 小米商城_banner  start -->
          
<div class="banner ">
  <div class="wrap ">
    <img  class="banner-img" src="C:\Users\86150\Desktop\2x\源码\images\0bdb0b3ff4e73fe2a6bf2f8fd399015e.png" alt="">
    <div class="slide">
        <ul>
            <li>
                <a href="#">手机< /a><i class="iconfont">&#xe658;</i>
                    <div class="slide-list ">

                        <ul>
                            <li><a href="">
                                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                                <span>小米至尊版</span>
                            </a>
                        </li>
                        <li><a href="">
                            <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                            <span>小米至尊版</span>
                        </a>
                    </li>
                    <li><a href="">
                        <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                        <span>小米至尊版</span>
                    </a>
                </li>
                <li><a href="">
                    <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                    <span>小米至尊版</span>
                </a>
            </li>
            <li><a href="">
                <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
                <span>小米至尊版</span>
            </a>
        </li>
        <li><a href="">
            <img src="C:\Users\86150\Desktop\2x\源码\images\02ac31f8d3848f71617e074e8e50879e.png" alt="">
            <span>小米至尊版</span>
        </a>
    </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">电视< /a><i class="iconfont">&#xe658;</i></li>
                    <li><a href="#"> 电脑< /a><i class="iconfont">&#xe658;</i></li>
                        <li><a href="#"> 笔记本< /a><i class="iconfont">&#xe658;</i></li>
                            <li><a href="#"> 台式机< /a><i class="iconfont">&#xe658;</i></li>
                                <li><a href="#"> 手机< /a><i class="iconfont"> &#xe658;</i></li>
                                    <li><a href="#"> 手机< /a><i class="iconfont">&#xe658;</i></li>
                                        <li><a href="#"> 手机< /a><i class="iconfont">&#xe658;</i></li>
                                            <li><a href="#"> 手机< /a><i class="iconfont">&#xe658;</i></li>
                                                <li><a href="#"> 手机< /a><i class="iconfont">&#xe658;</i></li>
        </ul>
    </div>
  </div>

</div>

    <!-- 小米商城_banner  end -->

    <!-- 广告模块 start -->
        <div class="ad">

            <div class="wrap ">
                <div class="ad-aside">
                    <ul>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                        <li><a href="">
                            <i class="iconfont"> &#xe657;</i>
                            <p>米粉卡</p>
                        </a></li>
                    </ul>
                </div>
                <div class="ad-img">
                       <img src="C:\Users\86150\Desktop\2x\源码\images\35b3f906861db9d6472206e6d68318d9.jpeg" alt="">

                </div>
                <div class="ad-img">
                    <img src="C:\Users\86150\Desktop\2x\源码\images\35b3f906861db9d6472206e6d68318d9.jpeg" alt="">
                    
                </div>
                <div class="ad-img">
                    <img src="C:\Users\86150\Desktop\2x\源码\images\35b3f906861db9d6472206e6d68318d9.jpeg" alt="">
                    
                </div>
            </div>
        </div>


    <!-- 广告模块 end -->


    
  <!-- 内容模块  start -->

          <div class="content">
<div class="wrap">
<!-- 小米商城——手机模块  start-->
<div class="phone">
    <h3 class="title">
        手机
    </h3>
    <div class="phone-box">
<div class="phone-box-left">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\3d47879ec183e25a36e67e0219636e60.jpg" alt="">
    </a>
</div>
<div class="phone-box-right">
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>
   <div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\a7382271e3a677bf188679ca38d68a42.jpg" alt="">

        <p class="item-name">小米10至尊纪念版</p>
        <p class="item-desc">120想变焦/120w秒充/120Hz屏幕</p>
        <p class="item-price">5299元起</p>
    </a>
   </div>

</div>

    </div>

</div>

 <!-- 小米商城——手机模块  end-->
<div class="big-img">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\f334fbd05d5681bb838fefd1c815d88c.jpg" alt="">
    </a>
</div>
<!-- 家电模块  start -->
 <div class="elc">
<h3 class="title">家电</h3>
<div class="item elc-item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item elc-item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
<div class="item">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\63e15f377e87212d460592b4a1369ccd.jpg" alt="" class="item-img">
        <p class="item-name">Redom 红米电视 70英寸</p>
        <p class="item-desc">70英寸震撼鞠萍， 4k画质，细腻入正</p>
        <p class="item-price">3199元起<del >3799元</del></p>
    </a>
</div>
 <div class="item-last">
    <div></div>
    <div></div>
 </div>




</div>

<div class="big-img">
    <a href="#">
        <img src="C:\Users\86150\Desktop\2x\源码\images\88e35cffc82cd98cd53172460067af17.jpg" alt="">
    </a>
</div>
<!-- 家电模块  end -->

<!-- 视频模块  start-->
<div class="video">
    <h3 class="title">视频</h3>
    <div class="video-box">
        <div>
            <div class="video-img">
                <img src="C:\Users\86150\Desktop\2x\源码\images\101b19aca4bb489bcef0f503e44ec866.jpg" alt="">
                <div class="btn">
                    <div class="sanjiao"></div>
                </div>

            </div>
            <p class="video-name">Redmi 10x系列发布会</p>
            <p class="video-desc">Redmi 10x系列发布会</p>
        </div>
        <div>
            <div class="video-img">
                <img src="C:\Users\86150\Desktop\2x\源码\images\101b19aca4bb489bcef0f503e44ec866.jpg" alt="">
                <div class="btn">
                    <div class="sanjiao"></div>
                </div>

            </div>
            <p class="video-name">Redmi 10x系列发布会</p>
            <p class="video-desc">Redmi 10x系列发布会</p>
        </div>
        <div>
            <div class="video-img">
                <img src="C:\Users\86150\Desktop\2x\源码\images\101b19aca4bb489bcef0f503e44ec866.jpg" alt="">
                <div class="btn">
                    <div class="sanjiao"></div>
                </div>

            </div>
            <p class="video-name">Redmi 10x系列发布会</p>
            <p class="video-desc">Redmi 10x系列发布会</p>
        </div>
        <div>
            <div class="video-img">
                <img src="C:\Users\86150\Desktop\2x\源码\images\101b19aca4bb489bcef0f503e44ec866.jpg" alt="">
                <div class="btn">
                    <div class="sanjiao"></div>
                </div>

            </div>
            <p class="video-name">Redmi 10x系列发布会</p>
            <p class="video-desc">Redmi 10x系列发布会</p>
        </div>
    </div>
</div>
<!-- 视频模块 end -->


</div>

</div>
<!-- 页脚模块 start  -->

<div class="footer">
    <div class="wrap">
        <div class="footer-service">
    <ul>
        <li><a href="#">
            <i class="iconfont">&#xe629;</i>
            <span>预约维修维护</span>
        </a></li>
        <li><a href="#">
            <i class="iconfont">&#xe629;</i>
            <span>预约维修维护</span>
        </a></li>
        <li><a href="#">
            <i class="iconfont">&#xe629;</i>
            <span>预约维修维护</span>
        </a></li>
        <li><a href="#">
            <i class="iconfont">&#xe629;</i>
            <span>预约维修维护</span>
        </a></li>
        <li><a href="#">
            <i class="iconfont">&#xe629;</i>
            <span>预约维修维护</span>
        </a></li>
    </ul>
        </div>
        <div class="footer-link">
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">账户管理</a></li>
            </ul>
            <div class="footer-aside">
                <p class="tel">400-100-5678</p>
                <p class="time">8:00-18:00(仅收市话费)</p>
            <a href="#" class="kefu">人工客服</a>
            <div class="follow">
                关注小米：
                <img src="C:\Users\86150\Desktop\2x\源码\images\wb.png"alt="">
                <img src="C:\Users\86150\Desktop\2x\源码\images\wx.png" alt="">


            </div>
            
            
            </div>
        </div>
    </div>
</div>
<!-- 页脚模块 end  -->




   <!-- 内容模块  end -->
</body>
</html>